<template>
  <div class="pay" v-if='payMess'>
    <x-header title="支付" :left-options="{backText:''}" class='whiteHeader' @click.native='goBack'></x-header>
    <maintainPay v-if='payFrom=="maintain"' :payMess='payMess' :fromOrder='fromOrder'>
    	<div class="voucher border-bottom"  v-if='!fromOrder'>
    	  <div class="voucherSelect" @click='allVoucher'>
  		    <span>代金券</span>
  		    <img src="../../assets/image/pay/right.png">
          <em v-if='voucherMess.RESULT_DATA.length==0'>暂无代金券可用</em>
          <label v-if='voucherMess.RESULT_DATA.length>0'>抵券：<em>￥{{voucherMess.ON_SALE_PRICE}}</em></label>
  		  </div>
		  <div class="allVoucher" v-if='!fromOrder'>
			  <popup v-model='showModelV' width='100%' position='right'>
			    <div>
		          <x-header title="选择代金券" :left-options="{backText:'',preventGoBack:true}" @click.native='close' class='whiteHeader'>
              </x-header>
		          <div class="useVoucher">
		        	<div class="voucherItem" v-for="item in voucherMess.RESULT_DATA" @click.stop='selectVoucher(item)'>
		        		<div class="itemLeft">
		        			<div :class='{on:voucherMess.CASH_VOL_NO==item.CASH_VOL_NO,bg2:voucherMess.CATEGORY==2,bg3:voucherMess.CATEGORY==3,bg4:voucherMess.CATEGORY==4,bg5:voucherMess.CATEGORY==5}'></div>
		        			<h1>{{item.AMOUNT}}</h1>
		        			<p>元</p>
		        		</div>
		        		<div class="itemRight">
		        			<h1>{{item.SUBJECT}}</h1>
		        			<h2>有效日期：{{item.EXP_DATE | filterTimes}}</h2>
		        			<p>{{item.REMARK}}</p>
		        		</div>
		        	</div>
		         </div>
		        </div>
		      </popup>
	      </div>
    	</div>
    </maintainPay>
    <illegalPay v-if='payFrom=="illegal"' :payMess='payMess'></illegalPay>
    <yearCardPay v-if='payFrom=="maintainCard"' :payMess='payMess'></yearCardPay>
    <div class="voucher tong border-bottom" v-if='!fromOrder&&payFrom!="maintainCard"'>
      <label>通币</label>
      <span>共{{allTong}}通币,可用{{useTongB}}通币
        <img src="../../assets/image/pay/question.png" alt="" @click='showTongRule'/>
      </span>
      <group>
      <x-switch title='' v-model="tongVal" class='switch' v-if='useTongB>100'></x-switch>
      </group>
    </div>
    <div class="useB border-bottom" v-if='tongVal'>
      <label>使用</label>
      <span class="useNum" @click='useTong'>
        {{useB }}
        <img src="../../assets/image/pay/down.png" alt=""/>
      </span>
      <em>通币，抵</em><span>￥{{useB/100}}</span>
    </div>
    <!-- 订单支付信息 -->
    <!-- 保养 -->
    <div class="settle" v-if='!fromOrder&&payFrom=="maintain"'>
      <span v-if='tongVal'>抵币:<em>￥{{useB/100}}</em></span>
      <span v-if='voucherMess.RESULT_DATA.length>0'>抵券:<em>￥{{voucherMess.ON_SALE_PRICE}}</em></span>
      <span>合计:<em v-if='tongVal' class="settleAll">￥{{sum-voucherMess.ON_SALE_PRICE-useB/100}}</em>
      <em v-if='!tongVal'>￥{{sum-voucherMess.ON_SALE_PRICE}}</em>
      </span>
    </div>
    <!-- 来自订单保养 -->
    <div class="settle" v-if='fromOrder=="maintain"'>
      <span v-if='payMess.TB_NUM'>抵币：<em>￥{{payMess.TB_NUM/100}}</em></span>
      <span v-if='payMess.VOUCHERS_AMOUNT'>抵券：<em>￥{{payMess.VOUCHERS_AMOUNT}}</em></span>
      <span v-if='payMess.TOTAL_PRICE'>合计：<em class="settleAll">￥{{payMess.TOTAL_PRICE}}</em>
      </span>
    </div>
    <!-- 来自订单保养年卡 -->
    <div class="settle" v-if='fromOrder=="maintainCard"'>
      <span v-if='payMess.TOTAL_PRICE'>合计：<em class="settleAll">￥{{payMess.TOTAL_PRICE}}</em>
      </span>
    </div>
    <!-- 来自订单,钣喷 -->
    <div class="settle" v-if='fromOrder=="spray"'>
      <span v-if='payMess.TB_NUM'>抵币:<em>￥{{payMess.TB_NUM/100}}</em></span>
      <span v-if='payMess.VOUCHERS_AMOUNT'>抵券:<em>￥{{payMess.VOUCHERS_AMOUNT}}</em></span>
      <span>合计：<em class="settleAll">￥{{payMess.TOTAL_PRICE}}</em>
      </span>
    </div>
    <!-- 来自订单,违章 -->
    <div class="settle" v-if='fromOrder=="illegal"'>
      <span v-if='payMess.TB_NUM'>抵币:<em>￥{{payMess.TB_NUM/100}}</em></span>
      <span>合计:<em class="settleAll">￥{{payMess.allPRICE}}</em>
      </span>
    </div>
    <!-- 违章 -->
    <div class="settle" v-if='!fromOrder&&payFrom=="illegal"'>
      <span v-if='tongVal'>抵币:<em>￥{{useB/100}}</em></span>
      <span>合计:
        <em class="settleAll" v-if='tongVal'>￥{{sum-useB/100}}</em>
        <em class="settleAll" v-if='!tongVal'>￥{{sum}}</em>
      </span>
    </div>
    <!-- 保养年卡 -->
    <div class="settle" v-if='payFrom=="maintainCard"'>
      <span>合计:<em class="settleAll">￥{{sum}}</em>
      </span>
    </div>
  	<p class="payOnline" v-if='payFrom!="maintainCard"'>在线支付</p>
  	<div class="commonListBox" v-if='payFrom!="maintainCard"'>
  		
  		<ul class="orderRealList">
  			<li v-if="!isWX">
  				<table>
  					<tr>
  						<td width="93%">
  							<img src="../../assets/image/pay/aliPay.png" alt="" width="30" height="30" style="vertical-align: bottom;"> 支付宝
  						</td>
  						<td width="7%" style="text-align:right;">
  							<i class="payGou payGouChoose"></i>
  						</td>
  					</tr>
  				</table>
  			</li>
  			<li v-if="isWX">
  				<table>
  					<tr>
  						<td width="93%">
  							<img src="../../assets/image/pay/WXpay.png" alt="" width="30" height="30" style="vertical-align: bottom;"> 微信
  						</td>
  						<td width="7%" style="text-align:right;">
  							<i class="payGou payGouChoose"></i>
  						</td>
  					</tr>
  				</table>
  			</li>
  		</ul>
  	</div>
    <!-- 保养 或钣喷-->
  	<div class="totalNeedPay" v-if='payFrom=="maintain"'>
  		<span>
  			需支付<span class="bigTotal" v-if='!fromOrder&&tongVal'>{{sum-voucherMess.ON_SALE_PRICE-useB/100}}</span>
        <span class="bigTotal" v-if='fromOrder'>{{payMess.TOTAL_PRICE}}</span>
        <span class="bigTotal" v-if='!fromOrder&&!tongVal'>{{sum-voucherMess.ON_SALE_PRICE}}</span>元
  		</span>
  		<div class="btnPay" @click="toPay">
  			去支付
  		</div>
  	</div>
    <!-- 违章 -->
    <div class="totalNeedPay" v-if='payFrom=="illegal"'>
      <span>
        需支付<span class="bigTotal" v-if='tongVal'>{{sum-useB/100}}</span>
        <span class="bigTotal" v-if='!tongVal'>{{sum}}</span>元
      </span>
      <div class="btnPay" @click="toPayIllegal">
        去支付
      </div>
    </div>
    <!-- 年卡 -->
    <div class="totalNeedPay" v-if='payFrom=="maintainCard"'>
      <span>
        需支付<span class="bigTotal">{{sum}}</span>元
      </span>
      <div class="btnPay" @click="toPayCard">
        确定
      </div>
    </div>
    <confirm v-model="show2" title="使用通币数"
        theme="ios" @on-confirm="onConfirm">
        <div class="useTong">
          <group>
          <x-number title="" v-model="tongSelect" :step='100' button-style='round' width='2rem' :min='100' :max='useTongB'></x-number>
          </group>
        </div>
    </confirm>
    <div class="rule">
    <x-dialog v-model="showDiaLog" class="dialog-demo" hide-on-blur>
      <div class="tongRule">
        <h1>通币使用规则</h1>
        <p>使用条件</p>
        <p>1、订单金额大于2元（含）</p>
        <p>2、通币数量大于100（含）</p>
        <p>使用数量</p>
        <p>1、使用的通币数为100的整倍数</p>
        <p>2、100个通币抵1元</p>
        <div class="btns" @click='showDiaLog=false'>我知道了</div>
      </div>
    </x-dialog>
    </div>
    <form :action='zhifuBao' name="alipay" id="alipay" method="post">
        <input type="hidden" value="" name="jsonParams" id="jsonParams">
    </form>
    <!-- 保养喷漆送小黄人活动 -->
    <div class="yellow" v-if='showyellow' @click.stop='goCarProduct'>
      <img src="../../assets/image/pay/yellowP.png" alt="" />
    </div>
    <div class="mask" v-if='showyellow' @click='cancelMask'>
      
    </div>
  </div>
</template>
<script>
/*支付*/
import {XHeader,Popup,XSwitch,Confirm,XNumber,XDialog,Group} from 'vux';
import maintainPay from '../../components/maintain-pay';//保养支付组件
import illegalPay from '../../components/illegal-pay';//违章支付组件
import yearCardPay from '../../components/yearCard-pay';//年卡支付组件
import { setCookie, getCookie,appid,pushStateUrl,GetQueryString} from '../../util/commonUtils';
import wx from 'weixin-js-sdk'//微信jssdk
export default {
  name:"pay",
  // 数据
  data(){
    return{
    	userId:'',
        payFrom:'',//代表支付来自哪里
        payMess:'',  //支付时的一些数据
        showModelV:false, //代金券选择
        voucherMess:'',  //代金券信息
        sum:0,  //总价
        tongVal:false, //切换是否使用通币
        show2:false,
        tongSelect:0,//选择的通币数
        showDiaLog:false,
        allTong:0,// 所有的通币数
        zhifuBao:'', //支付宝支付链接
        useB:0, //最后使用的通币数
        clickPay:false,  //控制多次提交
        fromOrder:'',  //代表来自订单
        showyellow:false 
    }
  },
  // 计算属性
  computed:{
  	isWX(){
  		let UA = navigator.userAgent;
  		if ( UA.match(/MicroMessenger/i) == 'MicroMessenger' ) {
  			return true;
  		}
  		return false;
  	},
    useTongB(){//可以使用的通币数
      let num;
      if(!this.fromOrder&&this.payFrom=='maintain'){
        num=(this.sum-this.voucherMess.ON_SALE_PRICE)*0.5;
      }else if(this.payFrom=='illegal'){//违章不能使用代金券
        num=this.sum*0.5;
      }
      if(this.allTong>num*100){
        return parseInt(num)*100;
      }else{
        return parseInt(this.allTong/100)*100;
      }
    }
  },
  // 创建（实例创建完成）
  created(){
    pushStateUrl();
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
      this.getConfig();//获取微信的配置信息
    }else{
      sessionStorage.setItem('reload',1);
      location.reload();
      return;
    }
    this.userId=getCookie('loginkey');
    this.payFrom=localStorage.getItem("from");
    this.fromOrder=localStorage.getItem("fromOrder");
    this.payMess=JSON.parse(sessionStorage.getItem("payMess"));
    this.voucherMess=JSON.parse(sessionStorage.getItem("baoVoucher"));//保养代金券信息
    if(this.payFrom=='maintain'){
      for(let i=0;i<this.payMess.ORDER_LIST[0].SERV_PARAMS.length;i++){
        this.sum+=this.payMess.ORDER_LIST[0].SERV_PARAMS[i].PRICE*this.payMess.ORDER_LIST[0].SERV_PARAMS[i].QUANTITY;
      }
      this.sum+=Number(this.payMess.HOUR_TOTAL_FEE);
    }
    if(this.payFrom=='illegal'){
      this.sum=this.payMess.allPRICE;
    }
    if(this.payFrom!='maintainCard'){//不是从保养年卡过来就去请求通币数
      this.getUserTongB();//获取通币数
    }
    if(!this.isWX){//配置支付提交地址
      //正式
      if(this.fromOrder){
        this.zhifuBao=window.getIps+'/CARNT/ServOrderWeb/payOffServOrder.action';
      }else{
        this.zhifuBao=window.getIps+'/CARNT/ServOrderWeb/createMulitServOrder.action'
      }
      
    }
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // el被创建，并挂载到实例上
  mounted(){
  },
  // 方法（实例中的方法）-----------
  methods:{
    goBack(){
      history.go(-1);
    },
    //获取微信的配置信息
    getConfig(){
      let timestamp,nonceStr,signature;
      this.$fetchPost('/UserWeb/getConfig.action',{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        timestamp = data.timestamp;
        nonceStr =  data.nonceStr;
        signature = data.signature;
        // console.log(timestamp,nonceStr,signature,appId)
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        let that=this;
        wx.ready(function(){
          if(sessionStorage.getItem('oneP')){
            sessionStorage.removeItem('oneP');
            sessionStorage.remove('orderMess');
            return;
          }
          that.autoPay();
        })
      },err=>{

      });
    },
    //授权回来自动支付
    autoPay(){
      if(sessionStorage.getItem('orderMess')){//授权回来防止多次创建订单，自动提交订单
        let obj=JSON.parse(sessionStorage.getItem('orderMess'));
        sessionStorage.setItem('oneP','1');
        let TRADE_NO=obj.TRADE_NO;
        let TOTAL_FEE=obj.TOTAL_FEE;
        let BODY=obj.BODY;
        let ORDER_NO=obj.ORDER_NO;
        this.wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO);
        //清除流水号，总价，描述的信息
      }
    },
    allVoucher(){
      if(this.voucherMess.RESULT_DATA.length==0){
        return;
      }
    	this.showModelV=true;
    },
    close(){
    	this.showModelV=false;
    },
    //选择代金券
    selectVoucher(item){
    	this.voucherMess.CASH_VOL_NO=item.CASH_VOL_NO;
    	this.voucherMess.ON_SALE_PRICE=item.AMOUNT;
    	this.showModelV=false;
    },
    //使用通币弹框显示
    useTong(){
      this.show2=true;
      this.tongSelect=this.useB;
    },
    //使用通币弹框显示,点击确定后的操作
    onConfirm(){
      this.show2=false;
      this.useB=this.tongSelect;
    },
    //显示通币使用规则
    showTongRule(){
      this.showDiaLog=true;
    },
    //获取用户通币数
    getUserTongB(){
      this.$fetchPost('/ExperienceValueWeb/getMemberInfoByUserId.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allTong=res.INTEGRAL;
          if(res.INTEGRAL>100){
            let num;
            if(!this.fromOrder&&this.payFrom=='maintain'){
              num=(this.sum-this.voucherMess.ON_SALE_PRICE)*0.5;
            }else if(this.payFrom=='illegal'){//违章不能使用代金券
              num=this.sum*0.5;
            }
            if(this.allTong>num*100){
              this.useB=parseInt(num)*100;
            }else{
              this.useB=parseInt(this.allTong/100)*100;
            }
          }
        }
      },err=>{

      })
    },
    // 保养年卡支付
    toPayCard(){
      if(this.clickPay){
        return;
      }
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }
      this.clickPay=true;
      let obj=this.payMess;
      obj.PAY_WAY=4;//微信
      let str=JSON.stringify(obj);
      this.$vux.loading.show({
       text: '提交中...'
      })
      this.$fetchPost('/ServOrderWeb/createMulitServOrder.action',{jsonParams:str}).then(res=>{
        
        this.clickPay=false;
        this.$vux.loading.hide();
        if(res.STATUS_CODE==1){
          let that=this;
          this.$vux.alert.show({
              title: '提示',
              content: '支付成功',
              onHide () {
                that.$router.push('/order/1');
              }
          })
        }
      },err=>{
      })
    },
    //去支付（违章）
    toPayIllegal(){
      if(sessionStorage.getItem('orderMess')){
        this.autoPay();
        return;
      }
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }
      //支付需要的参数
      if(!this.fromOrder){//非订单列表跳过来支付
        let obj={};
        obj.USER_ID=this.userId;
        obj.MOBILE_PHONE=this.payMess.MOBILE_PHONE;//联系人号码
        obj.CONTACT=this.payMess.CONTACT;//联系人
        obj.ORDER_SOURCE=this.payMess.ORDER_SOURCE;
        obj.IS_OBD=this.payMess.IS_OBD;
        obj.CAR_BRAND_NAME=this.payMess.CAR_BRAND_NAME;
        obj.CAR_ID=this.payMess.CAR_INFO_ID;
        obj.CAR_NUMBER=this.payMess.CAR_NUMBER;
        obj.ORDER_LIST=[];
        let objs={};
        objs.COMP_ID=this.payMess.COMP_ID;
        objs.CASH_VOL_NO=this.payMess.CASH_VOL_NO;
        objs.SERV_PARAMS=[];
        let objss={};
        objss.SERV_ID=this.payMess.SERV_ID;
        objss.MARK=this.payMess.MARK;
        objss.QUANTITY=1;
        objs.SERV_PARAMS.push(objss);
        obj.ORDER_LIST.push(objs);
        if(this.tongVal){//使用通币的情况
          obj.ISUSE_TB=1;//使用通币
          obj.TB_NUM=this.useTongB;
        }else{
          obj.ISUSE_TB=0;
        }
        this.$vux.loading.show({
         text: '提交中...'
        })
        if(this.isWX){
          obj.PAY_WAY=2;//微信
          this.wxCPay(obj);
        }else{
          obj.PAY_WAY=1;//支付宝
          this.alipay(obj);
        }
      }else{//违章对待支付的订单发起支付
        let payOrder={};
        payOrder.ORDER_ID=this.payMess.ORDER_ID;
        payOrder.USER_ID=this.userId;
        payOrder.NEED_INVOICE=0;
        if(this.isWX){
          payOrder.PAY_WAY=2;//微信
          this.againPay(payOrder);
        }else{
          payOrder.PAY_WAY=1;//支付宝
          this.alipay(payOrder);
        }
      }
    },
    //去支付(保养)
    toPay(){
      if(sessionStorage.getItem('orderMess')){
        this.autoPay();
        return;
      }
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }
      let obj={};
      obj=this.payMess;
      if(!this.fromOrder){//
        obj.ORDER_LIST[0].CASH_VOL_NO=this.voucherMess.CASH_VOL_NO;
        obj.MT_TYPE="1";
        if(this.tongVal){
          obj.ISUSE_TB=1;//使用通币
          obj.TB_NUM=this.useTongB;
        }else{
          obj.ISUSE_TB=0;
        }
        obj.MT_TYPE=1;
        //选择的代金券号
        if(this.isWX){
          obj.PAY_WAY=2;//微信
          this.wxCPay(obj);
        }else{
          obj.PAY_WAY=1;//支付宝
          this.alipay(obj);
        }
      }else{//订单列表跳过来支付（保养和保养年卡、钣喷）
        let payOrder={};
        payOrder.ORDER_ID=obj.ORDER_ID;
        payOrder.USER_ID=this.userId;
        payOrder.NEED_INVOICE=0;
        if(this.fromOrder=='spray'){
          payOrder.MOBILE_PHONE=getCookie('phones');
          if(!getCookie('phones').test(/^1[3456789]\d{9}$/g)){
            this.$vux.alert.show({
                title: '提示',
                content: "电话号码不合格"
            })
            return;
          }
          if(this.isWX){
            payOrder.PAY_WAY=2;//微信
            this.againPay(payOrder);
          }else{
            payOrder.PAY_WAY=1;//支付宝
            this.alipay(payOrder);
          }
        }else{
          if(this.isWX){
            payOrder.PAY_WAY=2;//微信
            this.againPay(payOrder);
          }else{
            payOrder.PAY_WAY=1;//支付宝
            this.alipay(payOrder);
          }
        }
      }
    },
    //对未支付的订单发起支付
    againPay(obj){
      this.$vux.loading.show({
       text: '提交中...'
      })
      this.$fetchPost('/ServOrderWeb/payOffServOrder.action',{jsonParams:JSON.stringify(obj)}).then(res=>{
        this.$vux.loading.hide();
        if(res.STATUS_CODE==1){
          this.wxPay(res.TRADE_NO,res.TOTAL_FEE/100,res.BODY,res.ORDER_NO);
        }else if(res.STATUS_CODE==89){
           this.$vux.alert.show({
                title: '提示',
                content: res.RESULT_MSG
            })
        }
      },err=>{

      })
    },
    // 支付宝支付
    alipay(obj){
      document.getElementById('jsonParams').value = JSON.stringify(obj);
      document.getElementById('alipay').submit();
    },
    //微信支付  创建订单
    wxCPay(obj){
        if(this.clickPay){
          return;
        }
        this.clickPay=true;
        let str=JSON.stringify(obj);
        this.$fetchPost('/ServOrderWeb/createMulitServOrder.action',{jsonParams:str}).then(res=>{
          this.$vux.loading.hide();
          if(res.STATUS_CODE==1){
            let TRADE_NO=res.TRADE_NO;//流水号
            let TOTAL_FEE=res.TOTAL_FEE/100;//总金额
            let BODY=res.BODY;//商品描述
            let ORDER_NO=res.ORDER_NO;//订单号
            this.wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO);//调起微信的统一支付
          }else if(res.STATUS_CODE==19){
            this.$vux.alert.show({
                title: '提示',
                content: '重复使用代金券',
            })
          }else if(res.STATUS_CODE==20){
            this.$vux.alert.show({
                title: '提示',
                content: '代金券超出可使用数',
            })
          }else if(res.STATUS_CODE=23){
            this.$vux.alert.show({
                title: '提示',
                content: '代金券不可使用或已过期',
            })
          }
        },err=>{

        })
    },
    // 微信统一支付
    wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO){
      //流水号TRADE_NO，支付金额PRICE，商品描述BODY
      let paystr=TRADE_NO+","+TOTAL_FEE+","+BODY;
      this.$vux.loading.hide();
      let that=this;
      var augstr = TRADE_NO+','+TOTAL_FEE+','+BODY;
      let url=location.href;
      var json = {
        'returnUrl': url,
        'paystr':augstr
      };
      this.$fetchPost('/WeChat/getOrder.action',json).then(res=>{
        let obj={
          TRADE_NO:TRADE_NO,
          TOTAL_FEE:TOTAL_FEE,
          BODY:BODY,
          ORDER_NO:ORDER_NO
        }
        sessionStorage.setItem('orderMess',JSON.stringify(obj));
        if(res.CODE==0){
          //跳过去授权
          window.location.href = window.getIps+'/CARNT/WeChat/OAuth.action';
        }else if(res.CODE==1){
          this.clickPay=false;
          let timestamp=res.timestamp;
          let noncestr=res.noncestr;
          let prepayid=res.prepayid;
          let sign=res.sign;
          //调起微信支付
            wx.chooseWXPay({
              appId: appid,
              timestamp: timestamp, //支付签名时间戳
              nonceStr: noncestr, //支付签名随机串，不长于 32 位
              package: "prepay_id=" + prepayid, //统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: 'MD5', //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: sign.toUpperCase(), //支付签名
              success: function(ress) {
                switch (ress.errMsg) {
                  case 'chooseWXPay:cancel':
                    // 清空保存的订单信息
                    that.$vux.alert.show({
                        title: '提示',
                        content: '取消支付！',
                    })
                    this.clickPay=false;
                    break;
                  case 'chooseWXPay:fail':
                    that.$vux.alert.show({
                        title: '提示',
                        content: '支付失败！（' + ress.err_desc + '）',
                    })
                    this.clickPay=false;
                    break;
                  case 'chooseWXPay:ok':
                    // 清空保存的订单信息
                    sessionStorage.removeItem('orderMess');
                    that.$vux.alert.show({
                        title: '提示',
                        content: '支付成功！',
                        onHide () {
                           if(new Date().getTime()<new Date('2017/10/31 24:00:00').getTime()&&total_fee>=500&&that.payFrom=='maintain'){
                              that.showyellow=true;
                            }else{
                              that.$router.push('/order/1');
                            }
                        }
                    })
                    break;
                  default:
                    break;
                }
              },
              cancel:function(ress){
                that.$vux.alert.show({
                    title: '提示',
                    content: '支付取消',
                })
                this.clickPay=false;
              },
              fail:function(ress){
                alert(JSON.stringify(ress));
              }
            });
        }
      },err=>{

      })
    },
    goCarProduct(){
      this.showyellow=false;
      window.location.href =window.getIps+"/CARNT/jsp/pro/prodetail.jsp?bro=m&servId=701220";
    },
    cancelMask(){
      this.showyellow=false;
      window.location.href = window.getIps+"/CARNT/jsp/mine/myOrderNew.jsp?type=WAIT_SERV";
    },

  },
  // 子组件
  components:{
    XHeader,
    maintainPay,
    Popup,
    XSwitch,
    Confirm,
    XNumber,
    XDialog,
    illegalPay,
    Group,
    yearCardPay
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.pay{
  width: 7.5rem;
  padding-bottom: 0.9rem;
  min-height: 100%;
  background: #eaeaea;
  .mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: rgba(0,0,0,.3);
    z-index: 9999;
  }
  .yellow{
    width: 5.15rem;
    height: 5.18rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -2.575rem;
    margin-top: -2.59rem;
    z-index: 10000;
    img{
      width: 5.15rem;
      height: 5.18rem;
    }
    
  }
  .tongRule{
    text-align: left;
    h1{
      font-size: 0.33rem;
      padding: 0 0.1rem;
      color: #333;
      text-align: center;
      height: 0.6rem;
      line-height: 0.6rem;
    }
    p{
      font-size: 0.24rem;
      color: #333;
      padding:0.1rem;
    }
    .btns{
      font-size: 0.3rem;
      height: 0.7rem;
      line-height: 0.7rem;
      background: #ff0000;
      color: #fff;
      text-align: center;
    }
  }
  .payOnline{
    font-size: .3rem;
    text-align: left;
    width: 7.5rem;
    margin: 0 auto;
  	padding: 0.2rem 0.2rem;
  	background: #ebebeb;
  }
  .useTong{
    height: 0.8rem;
  }

  .settle{
    display: flex;
    height: 0.8rem;
    background: #fff;
    line-height: 0.8rem;
    align-items:center;
    padding: 0 .2rem;
    justify-content: flex-end;
    span{
      font-size: 0.25rem;
      padding-left: 0.1rem;
    }
    em{
      font-style: normal;
      font-size: 0.3rem;
      color: #ec383f;
      font-weight: bold;
    }
    .settleAll{
      font-size: 0.31rem;
    }
  }
  .allVoucher{
  	.voucherItem{
  		background: #fff;
  		display: flex;
  		padding: 0.1rem 0.2rem;
  		border-bottom: 1px solid #ede9e9;
  		.itemLeft{
  			width: 2.31rem;
  			height: 1.3rem;
  			background: url(../../assets/image/ticket/1.png) no-repeat;
  			background-size: 2.31rem 1.3rem;
  			color: #fff;
  			div{
  				width: 0.37rem;
  				height: 0.37rem;
  				margin:0.1rem 0 0 0.3rem;
  				background: url(../../assets/image/pay/noSelect.png) no-repeat;
  			    background-size: 0.37rem 0.37rem;
  			}
  			.on{
  				background: url(../../assets/image/pay/select.png) no-repeat;
  			    background-size: 0.37rem 0.37rem;
  			}
  			h1{
  				font-size: 0.6rem;
  				line-height: 0.5rem;
  				margin-top: -0.05rem;
  			}
  			p{
  				line-height: 0.3rem;
  				font-size: 0.25rem;
  				text-align: right;
  				padding-right: 0.4rem;
  			}
  		}
      .bg2{
        background: url(../../assets/image/ticket/2.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg3{
        background: url(../../assets/image/ticket/3.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg4{
        background: url(../../assets/image/ticket/4.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg5{
        background: url(../../assets/image/ticket/5.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
  		.itemRight{
  			padding-left: 0.3rem;
  			text-align: left;
  			h1{
  				font-size: 0.27rem;
  				line-height: 0.4rem;
  				padding-top: 0.1rem;
  			}
  			h2{
  				font-size: 0.24rem;
  				line-height: 0.4rem;
  			}
  			p{
  				font-size: 0.22rem;
  				line-height: 0.4rem;
  			}
  		}
  	}
  }
  .voucher{
  	height: 0.8rem;
  	line-height: 0.8rem;
  	.allVoucher{
  		min-height: 100%;
      overflow: scroll;
  	}
  	.voucherSelect{
      background: #fff;
  		font-size: 0.26rem;
  		text-align: left;
  		overflow: hidden;
  		span{
  			padding-left: 0.2rem;
        color:#000;
  		}
      em{
        font-size: 0.23rem;
        color: #666;
        font-style: normal;
        padding-right: 0.2rem;
        float: right;
      }
      label{
        float: right;
      }
  		img{
  			float: right;
  			padding-right: 0.2rem;
  			width: 0.32rem;
  			height: 0.22rem;
  			margin-top: 0.27rem;
  		}
  	}
  }
  .tong{
    display: flex;
    background: #fff;
    label{
      font-size: 0.3rem;
      width: 15%;
      text-align: left;
      padding-left: 0.2rem;
      color: #000;
    }
    span{
      width: 60%;
      text-align: left;
      font-size: 0.25rem;
      line-height: 0.8rem;
      color: #686868;
      img{
        width: 0.35rem;
        height: 0.35rem;
        margin-top: -0.05rem;
        vertical-align: middle;
      }
    }
    .switch{
      float: right;
      margin-top: 0.07rem;
    }
  }
  .useB{
    height: 0.8rem;
    padding-left: 0.2rem;
    padding-top: 0.2rem;
    font-size: 0.3rem;
    text-align: left;
    background: #fff;
    label{
      font-weight: 600;
      color: #000;
    }
    span{
      color: #ff0000;
    }
    .useNum{
      padding: 0.1rem;
      margin:0 0.1rem;
      border-radius: 0.1rem;
      border:1px solid #ede9e9;
      img{
        width: 0.32rem;
        height: 0.18rem;
        padding-left: 0.1rem;
      }
    }
    em{
      font-style: normal;
    }
  }
  .commonListBox{
  	background: #fff;
  	/* border-radius: 5px; */
  	width: 7.5rem;
    padding: 0.1rem 0.25rem;
  	margin: 0 auto;
  }
  .orderRealList,{
	text-align: left;
	li{
		line-height: .5rem;
		width: 100%;
		table{
			width: 100%;
			border:0;
			td{
				font-size: .3rem;
        line-height: 0.6rem;
				.payGouChoose{
					display: block;
					width: 0.4rem;
					height: 0.4rem;
					background: url(../../assets/image/maintain/checked.png) no-repeat;
					background-size: 0.4rem 0.4rem; 
				}
        img{
          margin-right: 0.1rem;
        }
			}
		}
	}
  }
  .tableAlingR{
	text-align:right;
	color: #333333;
  }
  /* 底部支付 */
  .totalNeedPay{
		height: 1rem;
		width: 100%;
		z-index: 999;
		line-height: 1rem;
		position: fixed;
		bottom: 0;
		text-align: left;
		background: #2a2a2a;
		color: #fff;
		>span{
      display: inline-block;
      height: 1rem;
      line-height: 0.78rem;
			>span{
				color: #ce0d20;
			}
			font-size: .3rem;
			vertical-align: middle;
			padding-left: .2rem;
			.bigTotal{
				font-size: .35rem;
				color: #ff0000;
				padding: 0rem 0.06rem;
        font-weight: bold;
			}

		}
		.btnPay{
			width: 27%;
			height: 100%;
			float: right;
			font-size: .3rem;
			text-align: center;
			background: #dd0e24;
			vertical-align: middle;
			color: #fff;
		}
	}
}
</style>